$default-text: #111;
$article-text: #373737;
$link-color: #ccc;
$link-hover-color: #999;
$fancy-link-color: #ddd;
$fancy-link-hover-color: #333;
$default-text-width-em: 30em;
$default-element-width-em: 40em;

@font-face {
    font-family: "Montserrat";
    src: url('../fonts/Montserrat-Regular.otf');
}
@font-face {
    font-family: "Montserrat";
    src: url('../fonts/Montserrat-Bold.otf');
    font-weight: 700;
}

@font-face {
    font-family: "ProximaNova";
    src: url('../fonts/ProximaNovaRegular.otf');
}

@font-face {
    font-family: "ProximaNova-Bold";
    src: url('../fonts/ProximaNovaBold.otf');
}

@mixin center {
    margin-left: auto;
    margin-right: auto;
}

body {
    font-family: "ProximaNova";
    color: $default-text;
    font-size: 100%;
    width: 100%;
    margin: 0;
    overflow-x: hidden;
}

#container {
    margin-top: 5.000em;
    @include center;
}

@mixin default-text-width {
    width: $default-text-width-em;
}

@mixin default-element-width {
    width: $default-element-width-em!important;
}


a {
    color: $link-color;
    text-decoration: none;
}

a:hover {
    color: $link-hover-color;
}

#header {
    padding-top: 0.625em;
    position: absolute;
    left: 0.313em;
    top: 0.313em;
}

#logo {
    font-family: "Montserrat";
    font-size: 1.563em;
    letter-spacing: -2;
    color: $fancy-link-color;
    font-weight: 700;
    display: inline;
    padding: 0.188em 0.500em 0.188em 0.375em;
}

#logo:hover {
    color: $fancy-link-hover-color;
}

@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) {
    
    #logo {
        font-size: 60;
    }

    #header {
        position: relative !important;
    }

}
